<template>
    <div id="manage">
        <date-picker-con></date-picker-con>
        <div
            ref="articleData"
            class="article-data"
        >
            <add-fun></add-fun>
            <el-table
                v-loading="loading"
                :data="articleData"
                border
                style="width: 100%"
                :max-height="tableMaxHeight"
            >
                <el-table-column
                    label="序号"
                    type="index"
                    width="80"
                    align="center"
                    fixed="left"
                ></el-table-column>
                <el-table-column
                    prop="date"
                    label="发布时间"
                    width="180"
                    fixed="left"
                >
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="标题"
                    width="300"
                >
                </el-table-column>
                <el-table-column
                    prop="synopsis"
                    label="简介"
                    width="400"
                >
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="所属类型"
                    width="180"
                >
                </el-table-column>
                <el-table-column
                    prop="commentTotal"
                    label="评论总数"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="readingTimes"
                    label="阅读次数"
                    width="100"
                ></el-table-column>
                <el-table-column
                    prop="likes"
                    label="点赞次数"
                    width="100"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    width="150"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <blog-pagination
                :total="total"
                @on-size-change="onSizeChange"
                @on-page-change="onPageChange"
            ></blog-pagination>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import { manageCommonMixins } from 'assets/js/mixins';
    import { searchArticle, deleteArticle } from 'assets/js/api';
    import { mapMutations } from 'vuex';
    export default {
        mixins: [
            manageCommonMixins
        ],
        data () {
            return {
                pageSize: 20, // 每页条数
                pageNum: 1, // 页码
                total: 0, // 总条数
                startTime: '', // 起始时间
                endTime: '', // 终止时间
                articleData: [], // 文章数据
                loading: true // table loading Flag
            };
        },
        watch: {
            '$route' () {
                if (this.$route.name === 'articleManage') {
                    this.searchArticle();
                }
            }
        },
        mounted () {
            this.searchArticle();
        },
        methods: {
            ...mapMutations({
                setArticleInfo: 'SET_ARTICLE_INFO'
            }),
            /**
             * 添加
             */
            addFun () {
                this.goToEditArticle();
            },
            /**
             * 编辑
             * @param {Number} index 当前文章索引
             * @param {Object} row 当前文章信息
             */
            handleEdit (index, row) {
                this.setArticleInfo(row);
                this.goToEditArticle('edit');
            },
            /**
             * 跳转到文章编辑页
             * @param {String} from 状态 默认添加
             */
            goToEditArticle (from = 'add') {
                this.$router.push({
                    path: '/articleManage/editArticle',
                    query: {
                        from
                    }
                });
            },
            /**
             * 删除
             * @param {Number} index 当前文章索引
             * @param {Object} row 当前文章信息
             */
            handleDelete (index, row) {
                deleteArticle({
                    _id: row._id
                }).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    this.$message.success(res.msg);
                    this.searchArticle();
                });
            },
            /**
             * 时间范围改变事件
             * @param {Array} date 当前选择的时间范围
             */
            dateChange (date) {
                this.startTime = date[0];
                this.endTime = date[1];
                this.searchArticle();
            },
            /**
             * pageSize改变事件
             * @param {String} size 当前pageSize
             */
            onSizeChange (size) {
                this.pageSize = size;
                this.searchArticle();
            },
            /**
             * 页码改变事件
             * @param {String} page 当前页码
             */
            onPageChange (page) {
                this.pageNum = page;
                this.searchArticle();
            },
            /**
             * 查询文章列表
             */
            searchArticle () {
                let paramsJson = {
                    pageSize: Number(this.pageSize),
                    pageNum: Number(this.pageNum),
                    startTime: this.startTime,
                    endTime: this.endTime
                };
                this.loading = true;
                searchArticle(paramsJson).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    this.total = res.data.total;
                    this.articleData = res.data.list;
                    this.loading = false;
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/manageCommon';
</style>
